<template>
    <transition name="el-zoom-in-center">
        <div
            v-drag
            class="preViewBox"
            v-if="dialogStore.dialogVisible"
            :style="{
                left: dialogPosition[0] + 'px',
                top: dialogPosition[1] + 'px'
            }"
            ref="currentDom"
        >
            <div class="header">
                <div class="title">
                    {{ title }}
                    <div class="close" @click="close" @mousedown.stop></div>
                </div>
            </div>
            <div class="content">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>

<script lang="ts" setup>
// 水平 Horizontal
// 竖 vertical
import { computed, defineEmits, ref } from 'vue'
import { useDialogStore } from '@/stores/dialog'
import { nextZIndex } from '@/utils/common'

const emit = defineEmits(['close'])
const props = defineProps({
    width: {
        type: Number,
        default: 275
    },
    height: {
        type: Number,
        default: 274
    },
    title: {
        type: String,
        default: '详细信息'
    },
    visible: {
        type: Boolean,
        default: false
    },
    XY: {
        type: Array,
        default: () => [0, 0]
    }
})

const currentDom = ref()
const contentSize = computed(() => ({
    width: props.width - 15,
    height: props.height - 15 - 68
}))
const dialogStore = useDialogStore()
const close = () => {
    dialogStore.setDialogVisible(false)
    emit('close')
}

const dialogPosition = computed(() => {
    const moveContainer = document.body

    let flag = props.XY?.some(item => item)
    if (flag) return props.XY
    //手动填写的位置不做处理
    let result = dialogStore.XY
    let left: number = result[0] as number
    let top: number = result[1] as number

    const mw = moveContainer.offsetWidth
    const mh = moveContainer.offsetHeight
    if (!currentDom.value) return result
    const ew = currentDom.value.offsetWidth
    const eh = currentDom.value.offsetHeight
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    currentDom.value.style.zIndex = nextZIndex()
    if (left < 0) {
        left = 0
    }
    if (top < 0) {
        top = 0
    }
    if (left > mw - ew) {
        left = mw - ew
    }
    if (top > mh - eh) {
        top = mh - eh
    }
    // console.log(mw, mh, currentDom.value)
    return [left, top]
})
</script>

<style lang="scss" scoped>
.preViewBox {
    // border: 1px solid #ccc;
    position: fixed;
    @include boxLeft(v-bind('props.XY[0]'));
    @include boxTop(v-bind('props.XY[1]'));
    @include boxWidth(v-bind('props.width'));
    @include boxwHeight(v-bind('props.height'));
    z-index: 99;
    background: url('~@/assets/images/dialog/popup_bg@2x.png') no-repeat center/cover;
    font-family: Oppo, serif;
    background-size: 100% 100%;
    transition: all 0.3s;
    overflow: hidden;

    .header {
        //position: absolute;
        @include Left(0);
        @include Top(0);
        width: 100%;
        @include Padding(11, 90, 0, 12);
        box-sizing: border-box;

        .title {
            @include wHeight(16);
            @include LineHeight(16);
            @include FontSize(10);
            @include PaddingLeft(8);
            @include Width(197);
            display: flex;
            background: url('~@/assets/images/dialog/pop_tiltle_bg@2x.png') no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
        }

        .close {
            background: url('~@/assets/images/dialog/popup_close@2x.png') no-repeat;
            background-size: 100% 100%;
            @include Width(34);
            @include wHeight(25);
            position: absolute;
            @include Right(12);
            @include Top(2);
            cursor: pointer;
        }
    }

    i {
        @include FontSize(25);
        color: #fff;
        position: absolute;
        cursor: pointer;
    }

    .content {
        width: 100%;
        @include Padding(13, 11, 0, 11);
        box-sizing: border-box;
        background-size: 100% 100%;
        @include FontSize(10);
        box-sizing: border-box;
    }
}

.secondTitle {
    font-family: PingFangSC-Medium;
    @include FontSize(14);
    color: #dbd8ab;
    width: 100%;
    background-size: 100% 100%;
    @include Margin(6, 0, 6, 0);
    @include Padding(5, 0, 5, 10);
}
</style>
